<template>
	<view class="uni_box home">
		<navbar title='做题详情' :yin="true">
			<view class="hright" slot="right" v-if="tiinfo.time">
				<image class="jisuanqi" src="@/pages_subject/static/img/jisuanqi.png" mode="" />
				<!-- <text>04:23</text> -->
				<u-count-down  font-size="24" :show-hours="false" color="#FD864F" @end="timeend" separator-color="#FD864F" :timestamp="tiinfo.time"></u-count-down>
			</view>
		</navbar>
		<view class="content">
			<!-- <view class="sone">
				<text class="shoutit">总收藏    30</text>
				<view class="tilist">
					<view class="tiitem" :class="aindex==index+1?'active':''" v-for="(item,index) in 15" :key="index">{{ index+1 }}</view>
				</view>
			</view> -->
			<view class="tione">
				<image class="tis" src="@/pages_subject/static/img/tis.png" mode="" />
				<text class="numone">{{ Number(tiinfoindex)+1 }}<text class="numzong">/{{ tiinfo.count }}</text> </text>
				<view class="tioneright">
					<view class="tiitem" @click="gettiwen()">提问</view>
					<image class="tishou" src="@/pages_subject/static/img/tishou.png" mode="" v-if="ti.is_collection == 0" @click="getshoucang" />
					<image class="tishou" src="@/pages_subject/static/img/csed.jpg" mode="" v-if="ti.is_collection == 1" @click="getshoucang" />
					<image class="jiucuo" src="@/pages_subject/static/img/jiucuo.png" mode="" @click="getjiucuo" />
				</view>
			</view>
			<!-- <view class="stwo">
				<view class=""></view>
				<u-parse :html="ti.title" :tag-style="style"></u-parse>
				<view>      Which of the following reasons do not h -elp explain the </view>
			</view> -->

			<view class="sthree">
				<view class="tilist">
					<view class="tione plr">
						<text class="dan" v-if="ti.type == 1">单选题</text>
						<text class="dan" v-if="ti.type == 2">多选题</text>
						<text class="dan" v-if="ti.type == 3">判断题</text>
						<text class="dan" v-if="ti.type == 4">填空题</text>
						<text class="dan" v-if="ti.type == 5">问答题</text>
						<text class="dan" v-if="ti.type == 6">case</text>
					</view>
					<view class="tiname plr">
						<u-parse :html="ti.title" :tag-style="style"></u-parse>
					</view>
					<!-- 选择题 -->
					<view class="xuan" v-if="ti.type == 1 || ti.type == 2|| ti.type == 3">
						<!-- xactive -->
						<view class="xuanitem" :class="item.is_xuan?'xactive':''" v-for="(item,index) in tiop" :key="index" @click="getti(item,index)">
							<view class="xm">{{ item.value }}</view>
							<view class="xmnav">
								{{item.title}} 
							</view>
						</view>
					</view>
					<!-- 填空题 -->
					<view class="tiankong" v-if="ti.type == 4">
						<text class="tianshu">请输入您的答案：</text>
						<view class="tianshuinput">
							<u-input v-model="tval" type="text" :border="false" placeholder="请输入"/>
						</view>
					</view>
					<!-- 简答题 -->
					<view class="tiankong" style="display: flex;flex-direction: column;align-items: flex-start;" v-if="ti.type == 5">
						<text class="tianshu">请输入您的答案：</text>
						<view class="tianshuinput" style="width: 100%;margin-top: 30rpx;">
							<u-input v-model="tval" type="textarea" height="200" :border="false" placeholder="请输入"/>
						</view>
					</view>
				</view>

				<!-- <view class="daan">
					<view class="daitem">
						<text class="danum">C</text>
						<text class="datits">你的答案</text>
					</view>
					<view class="daitem two">
						<text class="danum">B</text>
						<text class="datits">正确答案</text>
					</view>
				</view>
				<view class="shipin plr">
					<view class="tione">
						<text class="dan">视频解析：</text>
					</view>
					<view class="spview">

					</view>
				</view>
				<view class="dajie plr">
					<view class="tione">
						<text class="dan">答案解析：</text>
					</view>
					<view class="danmiao">
						<text>A. Incorrect because fiscal policy refers to t
						-he government's decisions about taxation 
						and spending.</text>

						<text>B. Correct because fiscal policy refers to the
						government's decisions about taxation and 
						spending.</text>

						<text>C. Incorrect because monetary policy refers 
						to central bank activities that are directed t
						-oward influencing the quantity of money an
						-d credit in an economy. By contrast, fiscal 
						policy refers to the government's decisions 
						about taxation and spending.</text>

					</view>
				</view> -->


			</view>

			<view class="botview">
				<view class="shangbtn" @click="shangbtn()">上一题</view>
				<view class="nextbtn" @click="nextbtn()">{{ Number(tiinfoindex)+1==Number(tiinfo.count)?'交卷':'下一题' }}</view>
				<view class="shangbtn" style="background: linear-gradient(-90deg, #FA4E4E, #FD894F);" @click="getdati()">答题卡</view>
			</view>
			
		</view>

		<!-- 做题成功之后弹窗 -->
		<view class="tipop">
			<u-popup v-model="tiendshow" mode="center" :mask-close-able="false" width="80%" :closeable="false" :mask-custom-style="maskcustomstyle">
				<view class="tiendview" v-if="titype==1">
					<view class="thead">
						<image class="ticha" src="@/pages_subject/static/img/ticha.png" mode="" @click="tiendshow=false" />
					</view>
					<view class="navview">
						<image class="tibai" src="@/pages_subject/static/img/tibai.png" mode="" />
						<image class="tizhong" src="@/pages_subject/static/img/tizhong.png" mode="" />
					</view>
					<text class="kaomiao">{{titypetext}}</text>
					<view class="tibot">
						<view class="tibtn quedin" @click="jiaojuan">交卷</view>
					</view>
				</view>
				<view class="tiendview" v-if="titype==2">
					<view class="thead">
						<image class="ticha" src="@/pages_subject/static/img/ticha.png" mode=""  @click="tiendshow=false" />
					</view>
					<view class="navview">
						<image class="tibaitwo" src="@/pages_subject/static/img/tibai.png" mode="" />
					</view>
					<text class="kaomiao">{{titypetext}}</text>
					<view class="tibot">
						<view class="tibtn quedin" @click="jiaojuan" >确定</view>
						<view class="tibtn" @click="tiendshow=false" >取消</view>
					</view>
				</view>
				<view class="tiendview" v-if="titype==3">
					<view class="thead">
						<image class="ticha" src="@/pages_subject/static/img/ticha.png" mode=""  @click="tiendshow=false" />
					</view>
					<text class="kaomiao">{{titypetext}}</text>
					<view class="tibot">
						<view class="tibtn quedin" @click="jiaojuan">确定</view>
						<view class="tibtn" @click="tiendshow=false">取消</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				aindex:1,
				id:"",
				sort:1,
				tiinfo:{
					time:''
				},
				tiinfolist:[],
				tiinfoindex:0,
				timestamp:0,
				cid:'',
				log_id:'',
				sortinfo:{},
				maskcustomstyle:{
					background: 'rgba(0, 0, 0, 0.8)'
				},
				ti:{},
				style: {
						img: 'width:max-width:100%;height:auto;pointer-events: none;'
				},
				tval:"",
				cutti:{},
				tiop:[],
				tiendshow:false,
				titype:3,//1考试时间结束 2试题未完成 3本次题目已全部答完
				titypetext:'',
				test_id:''
			}
		},
		onLoad(option) {
			// if(option.id||option.test_id){
			// 	this.id = option.id||option.test_id
			// }
			if(option.test_id){
				this.id = option.test_id
			}
			this.getinfo();
		},
		onShow() {
		},
		methods: {
			setData(data){
				// console.log(data.data)  //接收  
				let tiinfolist = this.tiinfolist
				// this.getinfo();
				for(let i in tiinfolist){
					if(tiinfolist[i].sort == data.data.sort){
						this.sortinfo = tiinfolist[i] //拿到下个接口 tid 也就是 sortinfo.id
						this.tiinfoindex = i //当前题下标
					} 
				}
				this.getinfotwo();//题详情
			},
			async getinfo(){
				let res = await this.$u.api.getTopicListByTest({
					test_id:this.id
				});
				this.tiinfo = res
				this.tiinfolist = res.list
				this.log_id = res.log_id
				let tilist = res.list
				for(let i in tilist){
					if(tilist[i].sort == res.sort){
						this.sortinfo = tilist[i] //拿到下个接口 tid 也就是 sortinfo.id
						this.tiinfoindex = i //当前题下标
					} 
				}
				this.getinfotwo();//题详情
			},
			async getinfotwo(){
				let res = await this.$u.api.getTopicInfoByTest({
					tid:this.sortinfo.id,
					test_id:this.id,
					log_id:this.log_id
				});
				// 题ID :案例 1 单选 2多选 3判断 4 填空 5问答 6 case
				this.ti = res
				let op = res.op
				// for(let i in op){
				// 	op[i].is_xuan = false
				// }
				this.tiop = op
				if(res.user_answer){
					this.tval = res.user_answer
				}
				this.$forceUpdate()
			},	
			getti(item,index){
				let tiop = this.tiop
				if(this.ti.type == 1||this.ti.type == 3){
					//单选 判断
					for(let i in tiop){
						tiop[i].is_xuan = false
						if(tiop[i].value == item.value){
							tiop[i].is_xuan = true
						}
					}
				}else if(this.ti.type == 2){
					//多选
					// for(let i in tiop){
					// 	if(tiop[i].value == item.value){
					// 		tiop[i].is_xuan = !tiop[i].is_xuan
					// 	}
					// }
					tiop[index].is_xuan = !tiop[index].is_xuan
				}
				this.tiop = tiop
				console.log(this.tiop)
				this.$forceUpdate()
			},
			getdati(){//答题卡
				this.navrouter("/pages_subject/twoPage/TiPage/ShiJuanKa?cid="+this.id+'&log_id='+this.log_id);
			},
			timeend(){
				//倒计时结束触发
				this.getnext(3)
			},
			nextbtn(){
				//点击下一题
				let tiinfolist = this.tiinfolist
				let tiinfoindex = this.tiinfoindex
				console.log(tiinfolist.length)
				console.log(tiinfoindex)
				if(Number(tiinfoindex)>Number(Number(tiinfolist.length)-1)){
					//没有最后一题了
					this.$u.toast("没有最后一题了");
				}else if(Number(tiinfoindex)<Number(Number(tiinfolist.length)-1)){
					//下一题逻辑 请求做题记录接口
					
					this.getnext(1)
				}else if(Number(tiinfoindex)==Number(Number(tiinfolist.length)-1)){
					//等于最后一题
					this.getnext(2)
				}
			},
			async getnext(e){
				let tiop = this.tiop
				let answer = []
				if(this.ti.type == 1||this.ti.type == 3||this.ti.type == 2){
					//单选 判断 多选
					for(let i in tiop){
						if(tiop[i].is_xuan){
							answer.push(tiop[i].value)
						}
					}
				}
				if(this.ti.type == 4||this.ti.type == 5){
					//填空题 简答题
					answer.push(this.tval)
				}
				if(answer == ''&& e!=3){
					this.$u.toast("请先做题");
					return false;
				}
				let res = await this.$u.api.addSubTopicLogByTest({
					tid:this.sortinfo.id,
					test_id:this.id,
					answer:answer.toString(),
					log_id:this.log_id,
					sort:Number(this.tiinfoindex)+Number(1)
				});
				if(e == 1){
					//下一题
					this.tiinfoindex++
					this.sortinfo = this.tiinfolist[Number(this.tiinfoindex)]
					console.log(this.sortinfo)
					this.getinfotwo();//题详情
					// this.getinfo();
				}else if(e == 2||e == 3){
					//做完了 请求检查接口
					let resd = await this.$u.api.checkSubmitLogByTest({
						log_id:this.log_id
					});
					console.log(resd)
					this.titype = resd.type
					this.titypetext = resd.text
					this.tiendshow = true
				}
				this.tval = ''
			},
			shangbtn(){
				//上一题
				let tiinfolist = this.tiinfolist
				let tiinfoindex = this.tiinfoindex
				console.log(tiinfolist)
				console.log(tiinfoindex)
				if(Number(tiinfoindex)==0){
					//没有最后一题了
					this.$u.toast("没有上一题了");
				}else{
					this.tiinfoindex--
					this.sortinfo = this.tiinfolist[Number(this.tiinfoindex)]
					
					console.log(this.sortinfo)
					this.getinfotwo();//题详情
				}
					
			},
			gettiwen(){//点击提问
				this.navrouter("/pages_subject/twoPage/TiPage/MyTiwen?tid="+this.sortinfo.id);
			},
			async jiaojuan(){
				//点击交卷
				let resd = await this.$u.api.addSubmitLogByTest({
					log_id:this.log_id
				});
				this.tiendshow = false
				this.navrouter("/pages_subject/twoPage/TiPage/TiBaogao?log_id="+this.log_id+'&type=2');
				
			},
			getjiucuo(){
				//纠错
				this.navrouter("/pages_subject/twoPage/TiPage/Jiucuo?tid="+this.sortinfo.id);
			},
			async getshoucang(){
				let res = await this.$u.api.addCollection({
					tid:this.sortinfo.id,
				});
				this.$u.toast("操作成功");
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.content{
		background-color: #fff;
		padding-bottom: 140rpx;
		.tione{
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 40rpx 30rpx 30rpx;
			.tis{
				width: 24rpx;
				height: 26rpx;
				margin-right: 10rpx;
			}
			.numone{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: rgba(153, 153, 153, 1);
				.numzong{
					color: #FD864F;
				}
			}
			.tioneright{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-left: auto;
				.tiitem{
					width: 56rpx;
					height: 28rpx;
					background: #FD864F;
					border-radius: 14rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 18rpx;
					color: #FFFFFF;
					margin-left: 40rpx;
				}
				.tishou{
					margin-left: 40rpx;
					width: 36rpx;
					height: 34rpx;
				}
				.jiucuo{
					margin-left: 40rpx;
					width: 28rpx;
					height: 26rpx;
				}


			}
		}
		.sone{
			margin: 0rpx 30rpx 50rpx;
			padding: 20rpx 20rpx 10rpx 20rpx;
			background: #EEEEEE;
			border-radius: 10rpx;
			.shoutit{
				display: block;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 25rpx;
				color: #333333;
				margin-bottom: 15rpx;

			}
			.tilist{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				.tiitem{
					min-width: 30rpx;
					min-height: 30rpx;
					
					border-radius: 50%;
					padding: 5rpx 8rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #A6A6A6;
					font-weight: 500;
					font-size: 18rpx;
					color: #FFFFFF;
					margin-right: 18rpx;
					margin-bottom: 10rpx;
				}
				.active{
					background: #FA524E;
				}
			}
		}
		.stwo{
			padding: 24rpx;
			background: #F6F7FB;
			// margin: 0rpx 0 15rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;

		}
		.plr{
			padding: 0 30rpx;
		}
		.sthree{
			.tilist{
				display: flex;
				flex-direction: column;
				padding: 40rpx 0;
				// padding: 30rpx;
			}
			.tione{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 15rpx;
				.dan{
					padding: 6rpx 9rpx;
					background: #FD864F;
					border-radius: 5rpx;
					font-weight: 500;
					font-size: 20rpx;
					color: #FFFFFF;
				}
			}
			.tiname{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
				line-height: 60rpx;
			}
			.xuan{
				display: flex;
				flex-direction: column;
				.xuanitem{
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-top: 30rpx;
					padding: 9rpx 30rpx;
					.xm{
						width: 50rpx;
						height: 50rpx;
						background: #EEEEEE;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						font-weight: 500;
						font-size: 26rpx;
						color: #333333;
						margin-right: 15rpx;
						
					}
					.xmnav{
						font-weight: 500;
						font-size: 30rpx;
						color: #666666;
					}
				}
				.xactive{
					background: #F5F7F9;
					.xm{
						background: #FD864F;
						color: #fff;
					}
				}
			}
			.tiankong{
				display: flex;
				flex-direction: row;
				align-items: center;
				padding:50rpx 30rpx;
				.tianshu{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					display: inline-block;
					margin-right: 20rpx;
					
				}
				.tianshuinput{
					flex: 1;
					padding:0 20rpx;
					border: 1rpx solid #EAEAEA;
				}
			}


			.daan{
				display: flex;
				padding: 18rpx;
				background: #F5F7F9;
				flex-direction: row;
				margin: 40rpx 0 60rpx;
				.daitem{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 50%;
					.danum{
						font-weight: bold;
						font-size: 28rpx;
						color: #FD864F;
					}
					.datits{
						display: block;
						margin-top: 10rpx;
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
					}
				}
				.two{
					.danum{
						color: #FA554E;
					}
				}
			}
		}
		.shipin{
			background: #F5F7F9;
			border-radius: 5rpx;
			padding: 35rpx 30rpx;
			.spview{
				margin: 30rpx auto;
				width: 213rpx;
				height: 122rpx;
				border-radius: 10rpx;
				border: 1px solid #999999;
			}
		}
		.dajie{
			margin: 50rpx 0;
			.danmiao{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
				line-height: 42rpx;
				text{
					display: block;
					margin-bottom: 20rpx;
				}
			}
		}
	}
	.hright{
		position: absolute;
		right: 10px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.jisuanqi{
			width: 33rpx;
			height: 35rpx;
			position: relative;
			top: 4rpx;
		}
		text{
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 20rpx;
			color: #FD864F;
			display: inline-block;
		}
	}
	.shangbtn{
		height: 80rpx;
		background: rgba(253, 134, 79, 1);
		// background: linear-gradient(-90deg, #FA4E4E, #FD894F);
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFangSC;
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
		// width: 45%;
		flex: 1;
		margin: 0 20rpx;
	}
	.nextbtn{
		height: 80rpx;
		background: rgba(250, 78, 78, 1);
		// background: linear-gradient(-90deg, #FA4E4E, #FD894F);
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFangSC;
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
		// width: 45%;
		margin-left: auto;
		flex: 1;
		margin: 0 20rpx;
	}

	// 做题之后弹窗样式
	.tipop{
		/deep/.u-mode-center-box{
			background-color: transparent !important;
		}
		.tiendview{
			padding: 30rpx 30rpx 50rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			.thead{
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			.ticha{
				margin-left: auto;
				width: 35rpx;
				height: 35rpx;
			}

		}
		.navview{
			display: flex;
			flex-direction: row;
			margin: 30rpx 0;
			align-items: center;
			justify-content: center;
			position: relative;

			.tibai{
				height: 150rpx;
				width: 100%;
				position: absolute;
			}
			.tibaitwo{
				height: 150rpx;
				width: 100%;
				position: relative;
			}
			.tizhong{
				width: 158rpx;
				height: 158rpx;
				position: relative;
				margin-left: 8rpx;
			}
		}
		.kaomiao{
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #333333;
			display: block;
			text-align: center;
			margin: 20rpx 0 0;
		}
		.tibot{
			margin-top: 50rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			.tibtn{
				width: 180rpx;
				margin: 0 30rpx;
				// height: 46rpx;
				padding: 10rpx 0;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #eee;
				color: #333;
				font-size: 28rpx;
				font-weight: 400;
			}
			.quedin{
				background: linear-gradient(-90deg, #FA4E4E, #FD894F);
				color: #fff;
			}
		}
	}
</style>
